﻿<template>
  <div class="breadcrumb-container">
    <transition-group name="breadcrumb" tag="div" class="breadcrumb-wrapper">
      <div
        v-for="(item, index) in breadcrumbList"
        :key="item.path || index"
        class="breadcrumb-item"
        :class="{ 'is-last': index === breadcrumbList.length - 1 }"
      >
        <!-- 面包屑项 -->
        <router-link v-if="item.path && index !== breadcrumbList.length - 1" :to="item.path" class="breadcrumb-link">
          <span class="breadcrumb-text">{{ item.title }}</span>
        </router-link>

        <span v-else class="breadcrumb-current">
          <span class="breadcrumb-text">{{ item.title }}</span>
        </span>

        <!-- 分隔符 -->
        <el-icon v-if="index < breadcrumbList.length - 1" class="separator">
          <ArrowRight />
        </el-icon>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 面包屑列表
const breadcrumbList = computed(() => {
  const breadcrumbs = [];

  // 添加首页
  breadcrumbs.push({
    title: "首页",
    path: "/dashboard",
  });

  // 处理路由匹配
  const matched = route.matched.filter(item => item.meta && item.meta.title);

  matched.forEach((item, index) => {
    // 跳过根路由
    if (item.path === "/") return;

    // 跳过首页重复
    if (item.path === "/dashboard") return;

    breadcrumbs.push({
      title: item.meta.title,
      path: index === matched.length - 1 ? null : item.path, // 最后一项不可点击
    });
  });

  // 处理动态路由参数
  if (route.params.id && route.meta.dynamicTitle) {
    const lastItem = breadcrumbs[breadcrumbs.length - 1];
    if (lastItem) {
      lastItem.title = route.meta.dynamicTitle;
    }
  }

  return breadcrumbs;
});
</script>

<style scoped lang="scss">
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.breadcrumb-container {
  @include theme-transition;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.breadcrumb-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: nowrap;
  overflow: hidden;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
  position: relative;

  .breadcrumb-link {
    @include theme-transition;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--color-primary-lighter);
      transition: left 0.3s ease;
      z-index: -1;
    }

    &:hover {
      color: var(--color-primary);
      transform: translateY(-1px);

      &::before {
        left: 0;
      }
    }
  }

  .breadcrumb-current {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary-lighter);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-primary-light);
  }

  .separator {
    font-size: 12px;
    color: var(--color-text-quaternary);
    margin: 0 var(--spacing-xs);
    transition: all var(--transition-fast);

    .breadcrumb-item:hover + & {
      color: var(--color-primary);
      transform: translateX(2px);
    }
  }

  &.is-last {
    .separator {
      display: none;
    }
  }
}

// 面包屑动画
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s ease;
}

.breadcrumb-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: transform 0.3s ease;
}

// 响应式设计
@include respond-below(md) {
  .breadcrumb-wrapper {
    gap: var(--spacing-xs);
  }

  .breadcrumb-item {
    .breadcrumb-link,
    .breadcrumb-current {
      padding: var(--spacing-xs);
      font-size: var(--font-size-xs);
    }

    .breadcrumb-text {
      max-width: 80px;
      @include text-ellipsis;
    }
  }
}

@include respond-below(sm) {
  .breadcrumb-container {
    // 移动端只显示当前页面
    .breadcrumb-item:not(.is-last) {
      display: none;
    }

    .breadcrumb-item.is-last {
      .separator {
        display: none;
      }
    }
  }
}

// 暗色主题适配
[data-theme="dark"] {
  .breadcrumb-item {
    .breadcrumb-link {
      &::before {
        background: rgba(255, 255, 255, 0.1);
      }
    }

    .breadcrumb-current {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }
  }
}

// 高对比度模式
@media (prefers-contrast: more) {
  .breadcrumb-item {
    .breadcrumb-link {
      border: 1px solid var(--color-border-primary);
    }

    .breadcrumb-current {
      border-width: 2px;
    }
  }
}
</style>
